<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
    <script>
        $(function () {
            var $btn1=$("#btn1");
            $btn1.click(function () {
                alert("btn1被点击了");
                $btn1.css("background-color","red");
            });

            var $btn2=$(".btn2");
            $btn2.click(function () {
                alert("btn2被点击了");
            });
            $("<button id=\"btn3\">按钮3</button>").appendTo("body");
            var x1=document.getElementById("btn1");
            alert(x1);
            x1=$(x1);
            alert(x1);
            var $x2=$("#btn1");
            alert($x2);
            x2=$x2[0];
            alert(x2);
        });
    </script>
    <style>
        button{

        }
    </style>
</head>
<body>
    <button id="btn1">按钮1</button>
    <button class="btn2">按钮2</button>

</body>
</html>